<template>
  <div class="shape-toolbar">
    <div class="toolbar-group">
      <label>背景色：</label>
      <input type="color" v-model="background" @change="handleChange">
    </div>
    <div class="toolbar-group">
      <label>边框宽度：</label>
      <input type="number" v-model.number="borderWidth" min="0" @change="handleChange">
    </div>
    <div class="toolbar-group">
      <label>边框颜色：</label>
      <input type="color" v-model="borderColor" @change="handleChange">
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'

// 接收父组件传递的元素
const props = defineProps<{
  element: any
}>()
const emit = defineEmits<{
  (e: 'update-element', id: string, payload: Partial<any>): void
}>()

// 解构元素属性并转为响应式
const { background, borderWidth, borderColor, id } = toRefs(props.element)

// 处理属性变化
const handleChange = () => {
  emit('update-element', id.value, {
    background: background.value,
    borderWidth: borderWidth.value,
    borderColor: borderColor.value
  })
}
</script>

<style scoped>
.shape-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.toolbar-group input {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.toolbar-group input[type="number"] {
  width: 60px;
}
</style>